<template>
    <div>
        <Swiper></Swiper>
        <HomeSort :data="this.$store.state.home.arr"></HomeSort>
        <home-ad></home-ad>
        <!-- 热卖 -->
        <home-selling></home-selling>

        <div class="HomeEr">
            <div class="HomeEr-1">
                <div @click="tem='HomeErA',btn1()" clas="home-a1">
                    <p ref="a1">全部</p>
                    <span ref="b1">猜你喜欢</span>
                </div>
                <div @click="tem='homeErB',btn2()">
                    <p ref="a2">晚餐食材</p>
                    <span ref="b2">快手好菜</span>
                </div>
                <div @click="tem='homeErC',btn3()">
                    <p ref="a3">菜谱</p>
                    <span ref="b3">做个菜吧</span>
                </div>
                <div @click="tem='homeErD',btn4()">
                    <p ref="a4">人气</p>
                    <span ref="b4">大家在买</span>
                </div>
            </div>
            <!--指向缓存a和c两个组件 -->
            <keep-alive include="HomeErA,HomeErB,HomeErC,HomeErD">
                <component :is="tem"></component>
            </keep-alive>
        </div>
    </div>
</template>

<script>
import Swiper   from "@/components/common/Swiper"
import HomeSort from "@/components/Home/HomeSort"
import HomeSelling from "@/components/Home/HomeSelling"
import HomeAd from "@/components/Home/HomeAd"
import HomeErA  from '@/components/Home/HomeEr/HomeErA.vue'
import HomeErB  from '@/components/Home/HomeEr/HomeErB.vue'
import HomeErC  from '@/components/Home/HomeEr/HomeErC.vue'
import HomeErD  from '@/components/Home/HomeEr/HomeErD.vue'

export default {
    name: "HomeTabA",
    components:{
        Swiper,
        HomeSort,
        HomeAd,
        HomeSelling,
        HomeErA,
        HomeErB,
        HomeErC,
        HomeErD
    },
    data(){
      return{
          tem:HomeErA,
      }
    },
    mounted(){
        this.$store.dispatch("demolink",{url:"/Home/index"})
    },
    methods:{
        btn1(){
            this.$refs.a1.style.color = "#4facf8"
            this.$refs.b1.style.backgroundColor = "#4facf8"
            this.$refs.b1.style.color = "#fff"
            this.$refs.b1.style.borderRadius = ".17rem"
            this.$refs.a2.style.color = "#333"
            this.$refs.b2.style.backgroundColor = "#f5f5f5"
            this.$refs.b2.style.color = "#999"
            this.$refs.b2.style.borderRadius = "0"

            this.$refs.a3.style.color = "#333"
            this.$refs.b3.style.backgroundColor = "#f5f5f5"
            this.$refs.b3.style.color = "#999"
            this.$refs.b3.style.borderRadius = "0"

            this.$refs.a4.style.color = "#333"
            this.$refs.b4.style.backgroundColor = "#f5f5f5"
            this.$refs.b4.style.color = "#999"
            this.$refs.b4.style.borderRadius = "0"
        },
        btn2(){
            this.$refs.a2.style.color = "#4facf8"
            this.$refs.b2.style.backgroundColor = "#4facf8"
            this.$refs.b2.style.color = "#fff"
            this.$refs.b2.style.borderRadius = ".17rem"
            this.$refs.a1.style.color = "#333"
            this.$refs.b1.style.backgroundColor = "#f5f5f5"
            this.$refs.b1.style.color = "#999"
            this.$refs.b1.style.borderRadius = "0"

            this.$refs.a3.style.color = "#333"
            this.$refs.b3.style.backgroundColor = "#f5f5f5"
            this.$refs.b3.style.color = "#999"
            this.$refs.b3.style.borderRadius = "0"

            this.$refs.a4.style.color = "#333"
            this.$refs.b4.style.backgroundColor = "#f5f5f5"
            this.$refs.b4.style.color = "#999"
            this.$refs.b4.style.borderRadius = "0"
        },
        btn3(){
            this.$refs.a3.style.color = "#4facf8"
            this.$refs.b3.style.backgroundColor = "#4facf8"
            this.$refs.b3.style.color = "#fff"
            this.$refs.b3.style.borderRadius = ".17rem"
            this.$refs.a1.style.color = "#333"
            this.$refs.b1.style.backgroundColor = "#f5f5f5"
            this.$refs.b1.style.color = "#999"
            this.$refs.b1.style.borderRadius = "0"

            this.$refs.a2.style.color = "#333"
            this.$refs.b2.style.backgroundColor = "#f5f5f5"
            this.$refs.b2.style.color = "#999"
            this.$refs.b2.style.borderRadius = "0"

            this.$refs.a4.style.color = "#333"
            this.$refs.b4.style.backgroundColor = "#f5f5f5"
            this.$refs.b4.style.color = "#999"
            this.$refs.b4.style.borderRadius = "0"
        },
        btn4(){
            this.$refs.a4.style.color = "#4facf8"
            this.$refs.b4.style.backgroundColor = "#4facf8"
            this.$refs.b4.style.color = "#fff"
            this.$refs.b4.style.borderRadius = ".17rem"
            this.$refs.a1.style.color = "#333"
            this.$refs.b1.style.backgroundColor = "#f5f5f5"
            this.$refs.b1.style.color = "#999"
            this.$refs.b1.style.borderRadius = "0"

            this.$refs.a2.style.color = "#333"
            this.$refs.b2.style.backgroundColor = "#f5f5f5"
            this.$refs.b2.style.color = "#999"
            this.$refs.b2.style.borderRadius = "0"

            this.$refs.a3.style.color = "#333"
            this.$refs.b3.style.backgroundColor = "#f5f5f5"
            this.$refs.b3.style.color = "#999"
            this.$refs.b3.style.borderRadius = "0"
        },

    }
}
</script>

<style scoped>

.van-tabs{
    background-color: #f8f8f8;
}
.Home{
    height: 100%;
    background-color: #f5f5f5;
}
.HomeEr-1{
    display: flex;
    text-align: center;
    justify-content: center;
    padding: .15rem 0;
    background-color: #f5f5f5;
;
}
.HomeEr-1 div{
    flex: 1;
    color: #333;
    position: relative;
}
.HomeEr-1 div:after{
    position: absolute;
    content: "|";
    display: block;
    height: .20rem;
    top: .04rem;
    color: #dddddd;
}
.HomeEr-1 div:nth-child(1):after{
    display: none;
}
.HomeEr-1 div p{
    font-size: .17rem;
    margin-bottom: .05rem;
}
.HomeEr-1 div span{
    height: .17rem;
    line-height: .17rem;
    display: inline-block;
    color: #999999;
    font-size: .12rem;
    padding: .0rem .04rem;
}
/*.HomeEr-1 div p {*/
/*    color: #4facf8;*/
/*}*/
/*.HomeEr-1 div span{*/
/*    color: #fff;*/
/*    border-radius: .17rem;*/
/*    background-color: #4facf8;*/
/*}*/
.HomeEr-1 div:nth-child(1) p{
    color: #4facf8;
}
.HomeEr-1 div:nth-child(1) span{
        color: #fff;
        border-radius: .17rem;
        background-color: #4facf8;
}
</style>